<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 1 数组解构
        // 原始写法
        let arr1 = [1, 2, 3];
        console.log("第一个元素" + arr1[0]);
        console.log("第二个元素" + arr1[1]);
        console.log("第三个元素" + arr1[2]);
        // 解构写法
        let [x, y, z] = arr1; // x，y，z 将与 arr 中的每个位置对应来取值
        console.log("解构写法第一个元素" + x);
        console.log("解构写法第二个元素" + y);
        console.log("解构写法第三个元素" + z);
        console.log(x, y, z); // 1 2 3

        // 2. 对象解构
        const person = {
            name: "jack",
            age: 21,
            language: ['java', 'js', 'css']
        }
        
        // 解构表达式获取值，将 person 里面每一个属性和左边对应赋值
        // 扩展：如果想要将 name 的值赋值给其他变量，可以如下,nn 是新的变量名
        let {name:userName, age, language} = person;


        // 等价于下面
        // const userName = person.name;
        // const age = person.age;
        // const language = person.language;
        
        // 可以分别打印
        console.log(userName); // jack
        console.log(age); // 21
        console.log(language); // ['java', 'js', 'css']


    </script>
</body>

</html>